<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   $("pre.code").text($("div#div_1").html());
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".step1").show();});
   sub.steps.push(function() { removeBullets("remove1");$(".step2").show();$("pre.code").text($("div#div_1").html());$('pre.code').animate({width: "760", marginLeft: "-70"}, 2500, function() {$("div#div_1").show();})});
   sub.steps.push(function() {$("#div_1").show();});
});
function hello(){
alert("hello");
}</script>
    </head> 
<body class="jsxgraph_body">
<ul class="">
  <li class="step0 remove1">Javascript can modify the SVG DOM</li>
  <li class="step1 sub remove1 hide">You saw an example already before: the rectangle and circle swap.</li>
  <li class="step0">Events on SVG objects can be processed by Javascript</li>
  <li class="step2 hide"><span class="header">a "circle" summit:</span>
<table><tr><td width="50%">
<pre class="code">
</pre>
</td>
<td width="50%">
<div id="div_1" class="hide"> 
<svg id="figs" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="0 0 50 60">
<script type="javascript"><![CDATA[
  function hello(){ alert("hello");}
]]></script>
    <style type="text/css"><![CDATA[
      .figz {
        fill: black;
        stroke: red;
        stroke-width: 2;
      }
    ]]></style>
<line class="figz" x1="4" y1="55" x2="14" y2="20"/>
<line class="figz" x1="24" y1="20" x2="34" y2="55"/>
<circle class="figz" cx="19" cy="15" r="7" onClick="hello()"/>
</svg>
</div>
</td>
</tr></table>
</ul>
</li>
</body> 
</html> 
